<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>已完成的事情</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mitt@2.1.0/dist/mitt.umd.js"></script>
    <style>
        /*209001011 文连宇*/
        .list-move,
        .list-enter-active,
        .list-leave-active {
            transition: all 0.5s ease;
        }

        .list-enter-from,
        .list-leave-to {
            opacity: 0;
            transform: translateX(30px);
        }

        .list-leave-active {
            position: absolute;
        }

        body {
            font-family: Arial, sans-serif;
            font-size: 16px;
        }


        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }


        input[type="text"] {
            padding: 10px;
            border-radius: 5px;
            border: 1px solid black;
            margin-right: 10px;
        }

        button {
            padding: 10px;
            border-radius: 5px;
            border: none;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }

        h2 {
            font-size: 24px;
            margin-top: 30px;
            margin-bottom: 10px;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            background-color: #f2f2f2;
        }

        button {
            padding: 5px;
            border-radius: 5px;
            border: none;
            background-color: #af4c70;
            color: white;
            cursor: pointer;
            margin-top: 10px;
        }
    </style>
</head>
</html>

<body>
    <div id="app">
        <input type="text" v-model="things">
        <button @click="addThings">添加</button> 
        <button @click="clearAllThings">清除所有任务</button>
        <my-component :incomplete="listThings"></my-component>
        <my-componenttwo ref="componentTwoRef"></my-componenttwo>
    </div>
    <template id="child-template">
        <h2>待定列表</h2>
        <transition-group name="list" tag="ul">
            <li v-for="(item,index) in incomplete" :key="item">{{item}} <button
                    @click="haveCompletedThings(item,index)">已完成</button></li>
        </transition-group>

    </template>
    <template id="child-templateTwo">
        <h2>已完成列表</h2>
        <transition-group name="list" tag="ul">
            <li v-for="(item,index) in haveCompleted" :key="item">{{item}}<button
                    @click="delIncomplete(index)">删除</button>
            </li>
        </transition-group>
    </template>
    <script>
        const emitter = window.mitt()
        const { ref, reactive, provide, inject } = Vue
        const app = Vue.createApp({
            setup(props) {
                const things = ref("")
                const listThings = ref([])
                const componentTwoRef = ref(null)
                const addThings = () => {
                    listThings.value.push(things.value)
                }
                const clearAllThings = () => {
                    listThings.value = []
                    console.log(componentTwoRef)
                    componentTwoRef.value.clearHaveCompletedThings()
                }

                return { things, addThings, listThings, clearAllThings, componentTwoRef }
            }
        })
        app.component('my-component', {
            template: "#child-template",
            props: {
                incomplete: {
                    type: Array,
                    default: []
                }
            },
            setup(props) {
                const haveCompletedThings = (item, index) => {
                    emitter.emit('busEmit', item)
                    props.incomplete.splice(index, 1)
                }

                return { haveCompletedThings, }
            }
        })
        app.component('my-componenttwo', {
            template: "#child-templateTwo",
            setup() {
                const haveCompleted = ref([])
                emitter.on('busEmit', (v) => {
                    haveCompleted.value.push(v)
                })
                const delIncomplete = (index) => {
                    haveCompleted.value.splice(index, 1)
                }
                const clearHaveCompletedThings = () => {
                    haveCompleted.value = []
                }
                return { haveCompleted, delIncomplete, clearHaveCompletedThings }
            }
        })
        app.mount('#app')

    </script>

</body>

</html>